import React, { useState } from 'react';
import { 
  Camera, 
  ChevronRight, 
  Edit2, 
  Medal, 
  History, 
  Users, 
  UserCog,
  MapPin,
  Building2,
  Settings
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import EditProfileModal from '../components/EditProfileModal';
import BottomNav from '../components/BottomNav';

interface UserProfile {
  avatar: string;
  name: string;
  signature: string;
  region: string;
  team: string;
  phone: string;
  birthday: string;
  isAdmin: boolean;
}

export default function ProfilePage() {
  const navigate = useNavigate();
  const [showEditModal, setShowEditModal] = useState(false);
  const [profile, setProfile] = useState<UserProfile>({
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e',
    name: '王经理',
    signature: '用心做事，成就团队',
    region: '广西省柳州市',
    team: '无敌螺蛳团队',
    phone: '138****8888',
    birthday: '1990-01-01',
    isAdmin: true
  });

  const menuItems = [
    { 
      icon: <Users className="w-6 h-6" />, 
      title: '我参加的训练', 
      count: 28,
      link: '/my-trainings',
      color: 'bg-blue-50 text-blue-500'
    },
    { 
      icon: <UserCog className="w-6 h-6" />, 
      title: '我组织的训练', 
      count: 12,
      link: '/organized-trainings',
      color: 'bg-purple-50 text-purple-500'
    },
    { 
      icon: <Medal className="w-6 h-6" />, 
      title: '我的勋章', 
      count: 8,
      link: '/my-medals',
      color: 'bg-amber-50 text-amber-500'
    },
    { 
      icon: <History className="w-6 h-6" />, 
      title: '我的浏览记录', 
      count: 168,
      link: '/browse-history',
      color: 'bg-emerald-50 text-emerald-500'
    }
  ];

  const handleProfileUpdate = (updatedProfile: Partial<UserProfile>) => {
    setProfile({ ...profile, ...updatedProfile });
    setShowEditModal(false);
  };

  return (
    <div className="min-h-screen bg-gray-50 pb-16">
      {/* 个人信息卡片 */}
      <div className="bg-gradient-to-b from-blue-500 to-blue-600 p-6">
        <div className="flex items-start justify-between">
          <div className="flex items-center space-x-4">
            <div className="relative">
              <img
                src={profile.avatar}
                alt="头像"
                className="w-20 h-20 rounded-full object-cover border-4 border-white/30 shadow-lg"
              />
              <button className="absolute bottom-0 right-0 bg-white p-1.5 rounded-full text-blue-500 shadow-lg">
                <Camera className="w-4 h-4" />
              </button>
            </div>
            <div>
              <h1 className="text-2xl font-bold text-white">{profile.name}</h1>
              <p className="text-blue-100 mt-1">{profile.signature}</p>
              <div className="flex items-center space-x-4 mt-3">
                <div className="flex items-center text-blue-50 text-sm bg-white/10 px-3 py-1 rounded-full">
                  <MapPin className="w-4 h-4 mr-1" />
                  {profile.region}
                </div>
                <div className="flex items-center text-blue-50 text-sm bg-white/10 px-3 py-1 rounded-full">
                  <Building2 className="w-4 h-4 mr-1" />
                  {profile.team}
                </div>
              </div>
            </div>
          </div>
          <button 
            onClick={() => setShowEditModal(true)}
            className="flex items-center justify-center w-8 h-8 bg-white/10 rounded-full text-white hover:bg-white/20 transition-colors"
          >
            <Edit2 className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* 管理员入口 */}
      {profile.isAdmin && (
        <div className="px-4 py-3">
          <button
            onClick={() => navigate('/admin')}
            className="w-full flex items-center justify-between bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl p-4 shadow-lg hover:shadow-xl transition-all duration-300"
          >
            <div className="flex items-center">
              <Settings className="w-6 h-6 mr-3" />
              <span className="font-medium">进入后台管理</span>
            </div>
            <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      )}

      {/* 功能菜单 */}
      <div className="px-4 py-6">
        <div className="grid grid-cols-2 gap-4">
          {menuItems.map((item) => (
            <button
              key={item.title}
              onClick={() => navigate(item.link)}
              className="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-all duration-300 text-left"
            >
              <div className={`w-10 h-10 rounded-full ${item.color} flex items-center justify-center mb-3`}>
                {item.icon}
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-700 font-medium">{item.title}</span>
                <span className="text-gray-900 font-semibold">{item.count}</span>
              </div>
            </button>
          ))}
        </div>

        {/* 最近活动 */}
        <div className="mt-6 bg-white rounded-xl p-4 shadow-sm">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">最近活动</h2>
          <div className="space-y-4">
            {[1, 2, 3].map((_, index) => (
              <div 
                key={index} 
                onClick={() => navigate(`/detail/${index + 1}`)}
                className="flex items-center justify-between py-3 border-b last:border-0 cursor-pointer"
              >
                <div className="flex items-center space-x-3">
                  <div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center">
                    <Users className="w-6 h-6 text-gray-500" />
                  </div>
                  <div>
                    <h3 className="text-gray-900 font-medium">春雷行动训练</h3>
                    <p className="text-gray-500 text-sm">2024.03.15</p>
                  </div>
                </div>
                <ChevronRight className="w-5 h-5 text-gray-400" />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 编辑个人信息模态框 */}
      <EditProfileModal
        show={showEditModal}
        onClose={() => setShowEditModal(false)}
        profile={profile}
        onUpdate={handleProfileUpdate}
      />

      {/* 底部导航 */}
      <BottomNav />
    </div>
  );
}